<template>
	<view class="infoBox">
		<view class="toper flex-row"v-if="userType == 1">
			<view >当前角色等级为普通用户, 你可以申请成为行业专家哦！</view>
			<view class="btns" @click="goProfess">立即完善</view>
		</view>
		<view class="infobox">
			<view class="infoList flex-row flex-between">
				<view class="label">昵称</view>
				<view class="text flex-row" style="width: 60%;text-align: right;justify-content: flex-end;">
					<input type="text" v-model="name" placeholder="昵称" />
				</view>
			</view>
			<view class="infoList flex-row flex-between">
				<view class="label">头像</view>
				<view class="avatar flex-row">
					<image :src="head"></image>
					<view @click="ChooseHead">更改</view>
				</view>
			</view>
			<view class="infoList flex-row flex-between">
				<view class="label">所在领域</view>
				<view class="text arrow" @click="selectArea">
					<input class="input" type="text" disabled="disabled" v-model="fieldTitle" placeholder="请选择所在领域" placeholder-class="placeholder" />
					<image src="../../static/icon/right_arrow.png" ></image>
					<!-- <picker v-mode="field" :range="fieldArr" :range-key="'name'" :value="index" @change="getfieldArrId">
						<view>{{fieldArr[index].name}}</view>
					</picker>
					<image src="../../static/icon/right_arrow.png"></image> -->
				</view>
			</view>
			<view class="infoList flex-row flex-between">
				<view class="label">所在城市</view>
				<view class="text arrow">
					<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
						<view v-model="regionName">{{city}}</view>
					</pick-regions>

					<image src="../../static/icon/right_arrow.png"></image>
				</view>
			</view>
			<view class="infoList flex-row flex-between">
				<view class="label">是否公开手机</view>
				<view class="text flex-row">
					<view class="sex flex-row" @click="checkedItem(item)" v-for="item in radioList" :key="item.id">
						<image :src="item.isChecked?item.src2:item.src" /><text>{{item.label}}</text></view>
				</view>
			</view>
			<view class="infoList flex-row flex-between">
				<view class="label">身份证号</view>
				<view class="text flex-row" style="width: 60%;text-align: right;justify-content: flex-end;">
					<input type="number" v-model="idCard" />
				</view>
			</view>
			<view class="infoList flex-row flex-between">
				<view class="label">真实姓名</view>
				<view class="text flex-row" style="width: 60%;text-align: right;justify-content: flex-end;">
					<input type="text" v-model="real_name" />
				</view>
			</view>
			<view class="infoList flex-row flex-between">
				<view class="label">是否在线</view>
				 <switch :checked="switchbtn"   @change="switch1Change" />
			</view>
			<view class="infoList flex-row flex-between" v-if="switchbtn == true">
				<view class="label">交易时间段</view>
				<view class="width60 flex-row flex-between">
					<picker mode="time" :value="timestare" start="09:00" end="21:00" @change="bindTimeChange">
						<view class="uni-input color66 mgTop5 textCenter">{{timestare}}</view>
					</picker>
					<text class="color66">到</text>
					<picker mode="time" :value="timeend" start="09:00" end="21:00" @change="bindTimeChangeend">
						<view class="uni-input color66 mgTop5 textCenter">{{timeend}}</view>
					</picker>
				</view>
			</view>
			
			<view class="infoList flex-col">
				<view class="label" style="margin-bottom: 30upx;">个人简介</view>
				<view class="text">
					<textarea name="" v-model="introduce" id="" cols="" rows="3" value='' placeholder="请输入"></textarea>
				</view>
			</view>
			<view class="infoList flex-col">
				<view class="label" style="margin-bottom: 30upx;">荣誉资质</view>
				<view class="imgList">
					<view class="imgBox">
						<view class="imageup" v-for="(item,index) in imgUrlarr" :key='index'>
							<image class="imgitem" :src="item" @click="ViewImage"></image>
							<text @click="remove(index)">+</text>
						</view>
							<view class="upload flex-col" @click="ChooseImage">
							<image src="../../static/icon/upload.png"></image>
							<text>上传</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	import OSSUtil from '../../libs/ossUtil.js'
	export default {
		components: {
			pickRegions
		},
		name: 'byImgUpload',
		props: {
			authId: String,
			imgUrl: String,
			deleteFlag: Boolean,
			startShowAction: Function,
			startDelete: Function,
			imgActions: Array,
		},
		data() {
			return {
				region: [],
				idCard: '',
				defaultRegion: ['请选择', '请选择', '请选择'],
				defaultRegionCode: '',

				head: '../../static/icon/img_default_head.png',
				radioList: [{
						id: 1,
						src: require('../../static/icon/unchecked.png'),
						src2: require('../../static/icon/checked.png'),
						label: '是',
						isChecked: true
					},
					{
						id: 2,
						src: require('../../static/icon/unchecked.png'),
						src2: require('../../static/icon/checked.png'),
						label: '否',
						isChecked: false
					}
				],
				progress: 0,
				imgUrlarr: [],
				imgleng: 0,
				imgData: {
					visible: false,
					actions: this.imgActions
				},
				fieldArr: [],
				index: 0,
				field: '',
				isPublicTel: true,
				introduce: '',
				city: '',
				fieldTitle:'',
				fieldId:'',
				real_name:'',
				name:'',
				timestare: '9:00',
				timeend:'18:00',
				switchbtn:Boolean,
				detail:'',
				userType:''

			}
		},
		onLoad() {
			this.getFieldList()

			let id = uni.getStorageSync('userId')
			this.$http.get('/userCenter/getUserInfoById', {
				id: id
			}).then(res => {
				if (res.code == '0') {
					// console.log(res.data)
					this.userType = res.data.userType
				
					this.introduce = res.data.introduce
					this.idCard = res.data.idCard
					this.real_name = res.data.realName
					this.head = res.data.headImg
					this.city = res.data.city
					this.fieldTitle = res.data.fieldName
					this.name = res.data.name
					this.switchbtn = res.data.isOffline
					this.imgUrlarr = res.data.honor.split(',')
					let time = res.data.periodTimes.split('-')
					
					console.log(res.data.periodTimes.split('-'))
					this.timestare=time[0]
					this.timeend=time[1]
					// this.imgUrlarr = 
					
				} else {
					uni.showToast({
						icon: "none",
						title: res.msg
					})
				}
			})
		},
		computed: {
			regionName() {
				// 转为字符串
				return this.region.map(item => item.name).join(' ')
			}
		},
		methods: {
			//获取领域
			getFieldList() {
				this.$http.get('/userCenter/getFieldList', {
					parentId: 0
				}).then(res => {
					if (res.code == 0) {
						this.fieldArr = res.data
						// console.log(this.fieldArr)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//选择领域
			selectArea() {
				uni.navigateTo({
					url: '/pages/detail/arealist'
				});
			
			},
			
			// getfieldArrId(e) {
				
			// 	this.index = e.detail.value
			// 	var selected = this.fieldArr[this.index] //获取选中的数组
			// 	this.field = selected.id
			// 	console.log(selected.id)
			// },
			handleGetRegion(region) {
				this.region = region
				this.city = region[0].name + region[1].name+ region[2].name

			},
			bindTimeChange: function(e) {
				this.timestare = e.detail.value
			},
			bindTimeChangeend: function(e) {
				this.timeend = e.detail.value
			},
			switch1Change: function (e) {
				console.log(e.target.value)
				this.switchbtn = e.target.value
			},
			//修改头像
			async ChooseHead() {
				let files = await OSSUtil.getImage(); // 选择图片
				let sign = await OSSUtil.get_STS() // 获取签名等信息

				let imageSrc = files.tempFilePaths[0];
				let fileName = OSSUtil.getFileName(imageSrc); // 自定义上传后的文件名称

				let uploadTask = uni.uploadFile({
					url: sign.host,
					filePath: imageSrc,
					fileType: 'image',
					name: 'file',
					formData: {
						name: imageSrc,
						'key': fileName,
						'policy': sign.policy,
						'OSSAccessKeyId': sign.accessId,
						'success_action_status': '200',
						//让服务端返回200,不然，默认会返回204
						'signature': sign.signature,
					},
					success: (res) => {
						let that = this
						that.head = sign.host + '/' + fileName


						uni.showToast({
							title: '上传成功',
							icon: 'success',
							duration: 1000
						});

					},
					fail: (err) => {
						uni.showModal({
							content: err.errMsg,
							showCancel: false
						});
					}
				});
				uploadTask.onProgressUpdate((res) => {
					this.progress = res.progress;
				});

				// this.$emit('imgUploaded', {data: files.tempFilePaths[0], authId: this.authId});
			},
			//上传资质
			async ChooseImage() {
				let files = await OSSUtil.getImage(); // 选择图片
				let sign = await OSSUtil.get_STS() // 获取签名等信息

				let imageSrc = files.tempFilePaths[0];
				let fileName = OSSUtil.getFileName(imageSrc); // 自定义上传后的文件名称
                // console.log(files.tempFilePaths[0])
				let uploadTask = uni.uploadFile({
					url: sign.host,
					filePath: imageSrc,
					fileType: 'image',
					name: 'file',
					formData: {
						name: imageSrc,
						'key': fileName,
						'policy': sign.policy,
						'OSSAccessKeyId': sign.accessId,
						'success_action_status': '200',
						//让服务端返回200,不然，默认会返回204
						'signature': sign.signature,
					},
					success: (res) => {
						// console.log(res)
						let that = this
						// console.log(fileName)
						// console.log(sign.host + '/' + fileName)
						let img = sign.host + '/' + fileName
						this.imgUrlarr = this.imgUrlarr.concat(img)


						uni.showToast({
							title: '上传成功',
							icon: 'success',
							duration: 1000
						});

					},fail: (err) => {
						console.log('uploadImage fail', err);
						uni.showModal({
							content: err.errMsg,
							showCancel: false
						});
					}
				});
				uploadTask.onProgressUpdate((res) => {
					// console.log("上传进度" + res.progress);
					this.progress = res.progress;
				});

				// this.$emit('imgUploaded', {data: files.tempFilePaths[0], authId: this.authId});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgUrlarr,
					current: e.currentTarget.dataset.url
				});
			},
			onNavigationBarButtonTap(e) {
			
				let that = this
				let honor = that.imgUrlarr.join(',')
				that.$http.post('/userCenter/updateUserInfo', {
					headImg: that.head,
					field: that.fieldId,
					city: that.city,
					isPublicTel: that.isPublicTel,
					introduce: that.introduce,
					honor: honor,
					idCard: that.idCard,
					realName: that.real_name,
					periodTimes:that.timestare+'-'+that.timeend,
					isOffline:that.switchbtn,
					name:that.name
				}).then(res => {
				
					if (res.code == 0) {
						// uni.showToast({
						// 	icon: "none",
						// 	title: "您已提交资料申请成为“行业专家”请等待工作人员审核"
						// })
						setTimeout(function() {
							uni.switchTab({
								url: '../tab/person'
							})
						}, 2000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});

			},
			//单选
			checkedItem(item) {
				
				this.radioList.forEach(item => {
					item.isChecked = false;
				})
				this.$set(item, 'isChecked', true)
				if (item.label == "否") {
					this.isPublicTel = false
				} else if (item.label == "是") {
					this.isPublicTel = true
				}

			},
			
			//去完善
			goProfess() {
				uni.navigateTo({
					url: '/pages/person/sendProfess'
				})
			},
			remove(index) {
				this.imgUrlarr.splice(index, 1)
			},
			
		},
		watch: {
			field: function(val) {
				console.log(val.fieldId);
				this.fieldTitle = val.name;
				this.fieldId = val.fieldId
				console.log(this.fieldId)
			}
		},
	}
</script>

<style scoped lang="scss">
	.infoBox {

		.toper {
			padding: 25upx 20upx;
			font-size: 22upx;
			color: #22222A;
			background: rgba(253, 88, 10, 0.1);
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20upx;

			.btns {
				width: 118upx;
				height: 40upx;
				background: rgba(253, 88, 10, 1);
				border-radius: 8upx;
				font-size: 24upx;
				color: #fff;
				text-align: center;
				line-height: 40upx;
			}
		}

		.infobox {
			padding: 0 30upx;
			background: #Fff;

			.infoList {
				padding: 40upx 0;
				font-size: 30upx;
				border-bottom: 1upx solid #f8f8f8;
				display: flex;
				justify-content: space-between;

				.label {
					color: #666666;
					width: 200upx;
				}

				.avatar {
					align-items: center;
					color: #56AAF2;
					font-size: 24upx;

					image {
						width: 80upx;
						height: 80upx;
						border-radius: 50%;
						margin-right: 20upx;
					}
				}

				.imgList {
					// width: calc(100% + 10upx);
					padding: 0;
					display: flex;
					flex-wrap: wrap;

					view {
						// flex: 0 0 calc(30% - 10upx);
						height: 146upx;
						width: 220upx;
						margin-right: 15upx;
						margin-bottom: 15upx;

						&:nth-child(3n) {
							margin-right: 0;
						}

						&.imgBox {
							width: 100%;
							display: flex;
							flex-wrap: wrap;
							.imageup{
								height: 146upx;
								width: 200upx;
								margin-right: 20upx;
								margin-bottom: 20upx;
								position: relative;
								.imgitem {
									height: 146upx;
									width: 200upx;
								}
								text{
									position: absolute;
									right: -18rpx;
									top: -6px;
									width: 40rpx;
									height: 40rpx;
									font-size: 40rpx;
									text-align: center;
									color: white;
									cursor: pointer;
									line-height: 32rpx;
									border-radius: 100%;
									transform: rotate(45deg);
									background: rgba(0, 0, 0, 0.5);
								}
							}

							
						}

						&.upload {
							background: rgba(235, 235, 240, 1);
							border-radius: 8upx;
							align-items: center;
							justify-content: center;
							color: #9A9A9A;
							font-size: 24upx;

							image {
								width: 34upx;
								height: 34upx;
								margin-bottom: 14upx;
							}
						}
					}
				}

				.text {
					color: #22222A;

					textarea {
						width: 688upx;
						font-size: 30upx;
						color: #666666;
						height: 120upx;
					}

					.sex {
						align-items: center;

						image {
							width: 30upx;
							height: 30upx;
							margin-right: 12px;
							vertical-align: middle;
						}

						padding-left: 48upx;
					}
				}

				.arrow {
					display: flex;

					image {
						width: 12upx;
						height: 28upx;
						margin-left: 20upx;
						vertical-align: middle;
					}
				}
			}
		}

		picker {
			width: 300upx;
			height: 60rpx;
		}
		 /deep/.uni-switch-input-checked{
			
			background-color: rgb(253, 88, 10)!important;
			border-color:rgb(253, 88, 10)!important;
		}
	}
</style>
